<template>
  <div username="checkLabelList">
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <h1 class="con-right-title">
          <i class="fa fa-reply" @click="goBack"></i>
          用户标签管理/查看标签
        </h1>
        <!--上部搜索条件-->
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮 -->
        <div class="table-conBtn">
          <el-button type="warning" plain @click="delMul">
            批量删除
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!--下部table-->
        <el-table
          v-loading="loading"
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" align="center" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="大鹏号"
            prop="dapengAccount"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="用户名"
            prop="name"
            min-width="120"
          ></el-table-column>
          <el-table-column
            label="手机号"
            prop="mobile"
            min-width="130"
          ></el-table-column>
          <el-table-column
            label="标签分类ID"
            prop="tagCategoryId"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="标签分类"
            prop="tagCategoryName"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="标签ID"
            prop="tagId"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="标签"
            prop="tagName"
            min-width="100"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createdDate"
            min-width="160"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="delSingle(scope.row.tagId)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
      </div>
    </div>
  </div>
</template>

<script>
import { delCheckTag } from '@/api/lableManage/tagManage' // 接口
import { checkTagList } from '@/api/lableManage/labelUser' // 接口
import topSearch from '@component/lableManage/labelUser/checkLabel/topSearch' // 上部搜索条件
export default {
  name: 'SetUserList',
  msg: '角色管理/分配用户-列表页',
  components: {
    topSearch
  },
  data() {
    return {
      loading: false,
      userId: '',
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      tableData: [], // table内容
      formInline: {
        // 搜索条件
        tagName: null, // 标签名
        startTime: null, // 开始时间
        endTime: null, // 结束时间
        createTime: []
      },
      multipleSelection: []
    }
  },
  watch: {
    // $route.path改变时，mounted()不执行,通过监听$route.path，执行进入页面方法
    '$route.path': 'init'
  },
  mounted() {
    this.init()
  },
  methods: {
    /* 进入页面执行的方法 */
    init() {
      this.userId = this.$route.params.id
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      checkTagList(
        this.userId,
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    // 返回按钮
    goBack() {
      this.$router.go(-1)
    },
    // 批量删除
    delMul() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认删除选中的这${this.multipleSelection.length}条标签吗？`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.tagId)
        })
        this.delRequire(ids.join(','))
      })
    },
    // 单项删除
    delSingle(id) {
      this.$confirm(`确定删除该条用户标签信息吗？`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delRequire(id)
      })
    },
    /*删除请求*/
    delRequire(idStr) {
      let obj = {
        ids: idStr,
        userId: this.userId
      }
      delCheckTag(obj, (response) => {
        this.searchList()
      })
    },
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 新增编辑后，刷新列表 */
    refresh() {
      this.toSearch()
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    },
    /* 换页 */
    changePage(page) {
      this.page = page
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#rolesManage {
  height: 100%;

  .search-box {
    padding-left: 30px !important;
  }

  .bottom-box {
    position: relative;
    height: calc(~'100% - 40px');

    .table-conBtn {
      padding-left: 30px !important;
    }
    .left-tree {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      /*  background: #8cc5ff;*/
      width: 192px;
      height: calc(~'100% - 20px');
      overflow: hidden;

      &.hide-tree {
        width: 12px;
      }

      span.btn-arrow {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -25px;
        width: 12px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #ddd;
        cursor: pointer;

        &:hover {
          background: #ff8c00;
        }
      }
    }
    .table {
      &.hide-tree {
        margin-left: calc(~'12px + 20px');
      }
    }
  }
}
</style>
